﻿<div class="top-row pl-4 navbar navbar-dark d-flex d-md-none">
    <a class="navbar-brand" href="">Bootstrap Blazor</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <div class="top-item">
        <NavLink class="top-link" href="introduction" Match="NavLinkMatch.All">快速上手</NavLink>
        <ul class="nav flex-column">
            <li class="nav-item">
                <NavLink class="nav-link" href="introduction" Match="NavLinkMatch.All">简介</NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="install" Match="NavLinkMatch.All">类库安装</NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="install-server" Match="NavLinkMatch.All">服务器端模式 Server</NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="install-wasm" Match="NavLinkMatch.All">客户端模式 wasm</NavLink>
            </li>
        </ul>
    </div>

    <div class="top-item">
        <NavLink class="top-link" href="buttons" Match="NavLinkMatch.All">组件</NavLink>
        <ul class="nav flex-column">
            <li class="nav-item">
                <NavLink class="nav-link" href="alerts" Match="NavLinkMatch.All"><span>警告框</span><span>Alert</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="autocompletes" Match="NavLinkMatch.All"><span>自动完成</span><span>AutoComplete</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="avatars" Match="NavLinkMatch.All"><span>头像框</span><span>Avatar</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="badge" Match="NavLinkMatch.All"><span>徽章</span><span>Badge</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="buttons" Match="NavLinkMatch.All"><span>按钮</span><span>Button</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="captchas" Match="NavLinkMatch.All"><span>验证码</span><span>Captcha</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="cards" Match="NavLinkMatch.All"><span>卡片</span><span>Card</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="calendars" Match="NavLinkMatch.All"><span>日历框</span><span>Calendar</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="carousels" Match="NavLinkMatch.All"><span>走马灯</span><span>Carousel</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="checkboxs" Match="NavLinkMatch.All"><span>多选框</span><span>Checkbox</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="charts" Match="NavLinkMatch.All"><span>图表</span><span>Chart</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="circles" Match="NavLinkMatch.All"><span>进度环</span><span>Circle</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="collapses" Match="NavLinkMatch.All"><span>折叠</span><span>Collapse</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="consoles" Match="NavLinkMatch.All"><span>控制台</span><span>Console</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="dialogs" Match="NavLinkMatch.All"><span>对话框</span><span>Dialog</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="drawers" Match="NavLinkMatch.All"><span>抽屉</span><span>Drawer</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="datetimepickers" Match="NavLinkMatch.All"><span>时间框</span><span>DateTimePicker</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="dividers" Match="NavLinkMatch.All"><span>分割线</span><span>Divider</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="dropdowns" Match="NavLinkMatch.All"><span>下拉菜单</span><span>Dropdown</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="editors" Match="NavLinkMatch.All"><span>富文本框</span><span>Editor</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="footers" Match="NavLinkMatch.All"><span>页脚组件</span><span>Footer</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="inputs" Match="NavLinkMatch.All"><span>输入框</span><span>Input</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="layouts" Match="NavLinkMatch.All"><span>布局组件</span><span>Layout</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="menus" Match="NavLinkMatch.All"><span>菜单</span><span>Menu</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="messages" Match="NavLinkMatch.All"><span>消息框</span><span>Message</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="modals" Match="NavLinkMatch.All"><span>模态框</span><span>Modal</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="navs" Match="NavLinkMatch.All"><span>导航栏</span><span>Nav</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="paginations" Match="NavLinkMatch.All"><span>分页</span><span>Pagination</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="popovers" Match="NavLinkMatch.All"><span>弹出框</span><span>Popover</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="popconfirms" Match="NavLinkMatch.All"><span>确认框</span><span>Popconfirm</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="progresss" Match="NavLinkMatch.All"><span>进度条</span><span>Progress</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="radios" Match="NavLinkMatch.All"><span>单选框</span><span>Radio</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="rates" Match="NavLinkMatch.All"><span>评分</span><span>Rate</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="selects" Match="NavLinkMatch.All"><span>选择器</span><span>Select</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="sliders" Match="NavLinkMatch.All"><span>滑块</span><span>Slider</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="splits" Match="NavLinkMatch.All"><span>分割面板</span><span>Split</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="spinners" Match="NavLinkMatch.All"><span>旋转图标</span><span>Spinner</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="stepss" Match="NavLinkMatch.All"><span>步骤条</span><span>Steps</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="switchs" Match="NavLinkMatch.All"><span>开关</span><span>Switch</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="tabs" Match="NavLinkMatch.All"><span>标签页</span><span>Tab</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="tables" Match="NavLinkMatch.All"><span>表格</span><span>Table</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="tags" Match="NavLinkMatch.All"><span>标签</span><span>Tag</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="timelines" Match="NavLinkMatch.All"><span>时间线</span><span>Timeline</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="toasts" Match="NavLinkMatch.All"><span>轻量弹窗</span><span>Toast</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="toggles" Match="NavLinkMatch.All"><span>开关</span><span>Toggle</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="tooltips" Match="NavLinkMatch.All"><span>工具条</span><span>Tooltip</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="transfers" Match="NavLinkMatch.All"><span>穿梭框</span><span>Transfer</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="trees" Match="NavLinkMatch.All"><span>树形控件</span><span>Tree</span></NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="uploads" Match="NavLinkMatch.All"><span>上传组件</span><span>Upload</span></NavLink>
            </li>
        </ul>
    </div>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => CssBuilder.Default("sidebar-content ")
        .AddClass("collapse", collapseNavMenu)
        .Build();

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}
